<template>
  <div class="yingTuiHeXiaoPage">
    <el-card class="card-box">
      <div class="head">
        <h1>{{detailsInfo.projectName}}</h1>
      </div>
      <div class="info-box">
        <el-form>
          <el-row>
            <el-col  :span="6">
              <el-form-item class="form-item-margin_bottom" label="合同名称:">
                <span>{{detailsInfo.contractName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="合同编号:">
                <span>{{detailsInfo.contractId}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="合同类型:">
                <span>{{['','新签','续签','退租'][detailsInfo.contractType]}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="资产名称:">
                <span>{{detailsInfo.assetsName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="位置:">
                <span>{{detailsInfo.street}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="承租方:">
                <span>{{detailsInfo.customerNames}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="4.5">
              <el-form-item class="form-item-margin_bottom" label="面积:">
                <span>{{detailsInfo.leaseTotalArea}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="已缴/合同金额:">
                <span>{{(detailsInfo.paidContractTotalPrice || 0)+'/'+detailsInfo.contractTotalPrice}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="已履期数/合同期数:">
                <span>{{detailsInfo.contractPaidPeriodsNum+'/'+detailsInfo.contractPeriodsNum}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="服务期限:">
                <span>{{detailsInfo.signStartTime+'/'+detailsInfo.signEndTime}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <CommonTitle :titleName="`保证金:${detailsInfo.deposit} ${['','待缴','已缴','待退','已退','待补'][detailsInfo.depositStatus] || ''}`" class="m-t20"></CommonTitle>
    <el-card class="card-box m-t30">
      <div class="info-box">
        <el-form>
          <el-row>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="应退金额:">
                <span>{{detailsInfo.refundAmount}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="账户余额:">
                <span>{{detailsInfo.accountBalance}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="罚金:">
                <span>{{detailsInfo.fine}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="流水号:">
                <span>{{detailsInfo.payPlanId || '暂无'}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" required label="实退金额:">
                <!--<span>{{detailsInfo.actualRefundAmount || '暂无'}}</span>-->
                <el-input v-model="param.actualRefundAmount" type="number" placeholder="请请输入实退金额"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="6">
              <el-form-item class="form-item-margin_bottom" label="备注:">
                <el-input v-model="param.remarks" placeholder="非必填"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <CommonTitle titleName="付款凭证上传" class="m-t20"></CommonTitle>
    <div class="upload-box m-t20">
      <div class="d-flex a-center">
        <el-form-item label="上传附件" required>
          <el-upload
              ref="upload"
              class="upload-demo m-l10"
              :http-request="uploadFile"
          >
            <template #trigger>
              <el-button color="#67c23a" style="color: #FFFFFF">选择文件</el-button>
            </template>
          </el-upload>
        </el-form-item>
      </div>
    </div>
    <div class="button-wrap d-flex a-center j-center m-t30">
      <el-button @click="onCancel" color="#ff8350" style="color: #FFFFFF;padding: 0 20px">取消</el-button>
      <el-button @click="onSubmit" color="#93d6ff" style="color: #FFFFFF;padding: 0 20px">确认核销</el-button>
    </div>
  </div>
</template>

<script setup>
import {leaseApi, otherApi} from "@/api/lease";
import { ref,onMounted,reactive } from "vue";
import {useRouter} from "vue-router";
import CommonTitle from "@/components/CommonTitle.vue";
import {ElCard,ElForm,ElFormItem,ElRow,ElCol,ElMessage,ElInput,ElUpload} from "element-plus";

const router = useRouter();
const contractId = router.currentRoute.value.params.contractId;
const detailsInfo = ref({});

const getRefundableCollectionInfo = () => {
  leaseApi.getRefundableCollectionInfo({
    contractId:contractId,
  }).then(res=>{
    detailsInfo.value = res.data;
  });
}

const param = reactive({
  contractId:contractId, // 合同编号
  refundAmount:'',
  remarks:'',
  actualRefundAmount:'',// 实退金额
  fileUrlKey:'',// 文件地址
});

// 确认核销
const onSubmit  = () => {
  param.refundAmount = detailsInfo.value.refundAmount;
  // param.actualRefundAmount = detailsInfo.value.actualRefundAmount;
  if(param.actualRefundAmount.trim()===''){
    ElMessage.warning('请写实退金额!');
    return;
  }
  if(param.fileUrlKey.trim()===''){
    ElMessage.warning('请上传付款凭证!');
    return;
  }
  leaseApi.contractRefundableCollection(param).then(res=>{
    if(res.code == 200){
      ElMessage.success('核销成功!');
      router.push({ path: "/asset/management/managementIndex", query: {} });
    }
  });
}

const onCancel = () => {
  router.push({ path: "/asset/management/managementIndex", query: {} });
}

// el-upload 选择文件后
const uploadFile = (file) => {
  let uploadFile = new FormData();
  uploadFile.append("file",file.file)
  otherApi.uploadFile(uploadFile).then(res=>{
    if(res.code==200){
      ElMessage.success('上传成功!');
      param.fileUrlKey = res.data;
    }
  });
}

onMounted(()=>{
  getRefundableCollectionInfo();
});
</script>

<style lang="scss" scoped>
.yingTuiHeXiaoPage{
  .form-item-margin_bottom{
    margin-bottom: 0!important;
  }
  .card-box{
    width: 90%;
  }
  .button-wrap{}
}
</style>
